<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>群聊</title>
    <link href="../../../css/mui.min.css" rel="stylesheet"/>
    <!--全局css-->
    <link href="../../../css/g.css" rel="stylesheet">
    <!--每个文件对应一个css-->
    <link rel="stylesheet" href="groupChat.css"/>
    <script>
        document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px';
    </script>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <button class="rightMargin mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-right">
            <a class="mui-icon mui-icon-more mui-icon-left-nav mui-pull-right"></a>
        </button>
        <button class="mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left mui-action-back">
            <span class="mui-icon mui-icon-left-nav"></span>
            群名称
        </button>
    </header>
    <div class="mui-content" id="chat_content" onclick="chat_content();">
        <ul id="chat_message">
        	<!--<li class="mySend">
        		<div class="mySend_left">
        			<p class="mySend_name">刘先生</p>
        			<p class="mySend_say">hi,欢迎您~</p>
        			<i></i>
        		</div>
				<div class="mySend_right">
					<img src="../../../img/personal/imgSmall.png" alt="" height="40" width="40"/>
				</div>
        	</li>
        	<li class="otherSend">
        		<div class="otherSend_right">
					<img src="../../../img/msg/u12-2.png" alt="" height="40" width="40"/>
				</div>
        		<div class="otherSend_left" >
        			<p class="otherSend_name">oli</p>
        			<i></i>
        			<p class="otherSend_say">你好~</p>
        		</div>
        	</li>-->
        </ul>
    </div>

    

    <footer id="footer">
        <!-- 表情 -->
        <div class="footer-left" id="chatFace" onclick="group_face();">
            <div class="face_simple"></div>
        </div>
        <!-- 内容 -->
        <div class="footer-center">
            <textarea id='msg-text' type="text" class='input-text' oninput="content_val(event);" onclick="content_click();"></textarea>
            <button id='msg-sound' type="button" class='input-sound' style="display: none;">按住说话</button>
        </div>
        <!-- 发送 -->
        <label for="" class="footer-right" id="send">
            <i id='msg-type' class="mui-icon mui-icon-mic"></i>
        </label>
        <!-- add按钮 -->
        <label for="" class="footer-right-add" id="chatAdd" >
            <i class="mui-icon mui-icon-plus" style="font-size: 0.5rem;" onclick="group_pic_position();"></i>
        </label>
    </footer>

	<!-- 表情包 -->
    <div id="faceContent"></div>
    <!-- 发图片、位置 -->
    <div id="chat_group">
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4">
                <a href="#">
                        <span>
                            <img src="../../../img/msg/u101.png" alt="" height="40" width="40">
                        </span>
                    <div class="mui-media-body">图片</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4">
                <a href="#">
                        <span>
                            <img src="../../../img/msg/u102.png" alt="" height="40" width="40">
                        </span>
                    <div class="mui-media-body">位置</div>
                </a>
            </li>
        </ul>
    </div>

    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/mui.imageViewer.js"></script>
    <script src="../../../js/arttmpl.js"></script>

    <!--有用到再引用-->
    <!--接口-->
    <script src="../../../js/base.js"></script>
    <!--模板-->
    <script src="../../../js/laytpl.js"></script>
    <!--常用方法 dom操作用原生或mui-->
    <script src="../../../js/mq.js"></script>
    <script src="groupChat.js"></script>
    
    <!-- 环信 -->
    <script type='text/javascript' src='../web-im/test/res/js/sha1.js'></script>
    <script type='text/javascript' src='../web-im/test/res/js/webim.config.js'></script>
	<script type='text/javascript' src='../web-im/test/res/js/strophe-1.2.8.min.js'></script>
	<script type='text/javascript' src='../web-im/test/res/js/websdk-1.4.10.min.js'></script>
	<script type='text/javascript' src='../web-im/test/res/js/hx_api.js'></script>
	
	<script type="text/javascript">
		mui.plusReady(function() {
			userLogin();	// 登录
			expression();	// 表情 
		});

		
		//回调
	    conn.listen({
	        onOpened: function ( message ) {//连接成功回调
	            console.log('连接成功');
	            console.log(message);
	            // 如果isAutoLogin设置为false，那么必须手动设置上线，否则无法收消息
	            // 手动上线指的是调用conn.setPresence(); 如果conn初始化时已将isAutoLogin设置为true
	            // 则无需调用conn.setPresence();
	            conn.setPresence();
	        },
	        onClosed: function ( message ) {//连接关闭回调
	            console.log("连接关闭回调");
	
	        },
	        onTextMessage: function ( message ) {//收到文本消息
	            handleTextMessage(message);
	        },
	        onEmojiMessage: function ( message ) { //收到表情消息
	            emojiMessage(message);
	        },
	        onPictureMessage: function ( message ) {//收到图片消息
	            pictureMessage(message);
	        },
	        onCmdMessage: function ( message ) {//收到命令消息
	            console.log("收到命令消息");
	
	        },
	        onAudioMessage: function ( message ) {//收到音频消息
	            audioMessage(message);
	        },
	        onLocationMessage: function ( message ) {//收到位置消息
	            console.log("收到位置消息");
	
	        },
	        onFileMessage: function ( message ) {//收到文件消息
	            fileMessage(message);
	        },
	        onVideoMessage: function (message) {//收到视频消息
	            console.log(message);
	            var node = document.getElementById('privateVideo');
	            var option = {
	                url: message.url,
	                headers: {
	                    'Accept': 'audio/mp4'
	                },
	                onFileDownloadComplete: function (response) {
	                    var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response);
	                    node.src = objectURL;
	                },
	                onFileDownloadError: function () {
	                    console.log('File down load error.')
	                }
	            };
	            WebIM.utils.download.call(conn, option);
	        },
	        onPresence: function ( message ) {//收到联系人订阅请求、处理群组、聊天室被踢解散等消息
	            var e = message;
	
	            //（发送者希望订阅接收者的出席信息），即别人申请加你为好友
	            if ( e.type === 'subscribe' ) {
	                //若e.status中含有[resp:true],则表示为对方同意好友后反向添加自己为好友的消息，demo中发现此类消息，默认同意操作，完成双方互为好友；如果不含有[resp:true]，则表示为正常的对方请求添加自己为好友的申请消息。
	                if(confirm(e.from + "加您为好友，确定要添加对方为好友吗？")){
	                    requestAddFriends(e.from);
	                }else{
	                    requestRemoveFriends(e.from);
	                }
	            }
	            //(发送者允许接收者接收他们的出席信息)，即别人同意你加他为好友
	            if ( e.type === 'subscribed' ) {
	                alert(e.from + "同意你加他为好友");
	            }
	            //（发送者取消订阅另一个实体的出席信息）,即删除现有好友
	            if ( e.type === 'unsubscribe' ) {
	
	            }
	            //（订阅者的请求被拒绝或以前的订阅被取消），即对方单向的删除了好友
	            if ( e.type === 'unsubscribed' ) {
	                alert(e.from + '拒绝了您的添加请求');
	            }
	        },
	        onRoster: function ( message ) {//处理好友申请
	            console.log(message);
	        },
	        onInviteMessage: function ( message ) {//处理群组邀请
	            console.log("处理群组邀请");
	
	        },
	        onOnline: function () {//本机网络连接成功
	            console.log("本机网络连接成功");
	
	        },
	        onOffline: function () {//本机网络掉线
	            console.log("本机网络掉线");
	
	        },
	        onError: function ( message ) {//失败回调
	            console.log("失败回调");
	
	        },
	        onBlacklistUpdate: function (list) {//黑名单变动
	            // 查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息
	            console.log(list);
	
	            $(".getBlackList").empty();
	            var black_html = "";
	            var session_black = "";
	            for(var i in list){
	                black_html += "用户名：" + list[i].name + "，jid：" + list[i].jid;
	
	//                session_black += list[i].name + ":{jid: '" + list[i].jid + "',name: '" + list[i].name + "',subscription: 'both',order: '" + list[i].name + "',type: 'jid'" + "}";
	//                session_black += '{"type":"jid","order":"2","jid":"1133161018115126#chaishi_oli@easemob.com","name":"oli"},{"type":"jid","order":"2","jid":"1133161018115126#chaishi_oli2@easemob.com","name":"oli2"}';
	            }
	            $(".getBlackList").html(black_html);
	
	//            saveSessionStorage("session_black",session_black);
	        }
	    });
		

	</script>
</body>
</html>